<template>
	<view>
		<view style="height: 24rpx;margin-top: 10rpx;font-weight: bold;padding-left: 30rpx;font-size: 36rpx;">

		</view>
		<view class="top" >
			<!-- <view v-if="docInfo.headAttachUrl" class="avatar">
				<image :src="docInfo.headAttachUrl"  mode=""></image>
			</view> -->
			<view class="avatar">
				<image src="../../static/anonymity.png" mode=""></image>
			</view>
			<view class="detail">
				<text>测试</text>

				<view style="margin-top: 18rpx;">
					18265654654
				</view>
				<view class="img">
					<image src="../../static/back.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="card">
			<view @click="toNewStore">
				<image src="../../static/apply.png" mode=""></image>
				<text>创建店铺</text>
				<image src="../../static/back.png" mode="" class="img"></image>
			</view>
			<view @click="toAssistantCreate">
				<image src="../../static/apply.png" mode=""></image>
				<text>成为店员</text>
				<image src="../../static/back.png" mode="" class="img"></image>
			</view>

			<view @click="toAboutUs" style="display: flex;justify-content: space-between;border-bottom: none;">
				<view>
					<image src="../../static/about.png" mode=""></image>
					<text>关于我们</text>
				</view>
				<view>
					<text style="margin-right: 96rpx;margin-top: 4rpx;">1.0.1</text>
					<image src="../../static/back.png" mode="" class="img"></image>
				</view>
			</view>

		</view>
		<view @click="loginout" style="display: flex;align-items: center; border-bottom: none;" id="loginout">
			<image src="../../static/loginout.png" mode=""></image>
			<text>退出登录</text>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils/api.js'

	export default {
		data() {
			return {
				currentInfo: {}
			}
		},
		onShow() {
			
		},

		methods: {
			toAssistantCreate(){
				
			},
			previewAvatar(item) {
				const imgArr = []
				imgArr.push(item)
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			toNewStore() {
				uni.navigateTo({
					url: '/pages/store/step1'
				})
			},
			loginout() {
				uni.removeStorageSync('token')
				request({
					url: '/api/passport/passport/logout',
					methods: 'POST'
				})
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			toAboutUs() {
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	#loginout{
		width: 690rpx;
		height: 116rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding-left: 30rpx;
		image {
			width: 42rpx;
			height: 42rpx;
			margin-right: 30rpx;
		}
		text {
			font-size: 32rpx;
		}
		
		view {
			height: 114rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F6F4FA;
			position: relative;
		}
	}
	.card {
		width: 690rpx;
		height: 228rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 auto;
		margin-top: 22rpx;
		padding-left: 30rpx;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}

		.img {
			width: 32rpx;
			height: 32rpx;
			transform: rotate(180deg);
			position: absolute;
			right: 30rpx;
			top: 46rpx;
		}

		text {
			font-size: 32rpx;
		}

		view {
			height: 114rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #F6F4FA;
			position: relative;
		}
	}

	.top {
		width: 690rpx;
		height: 182rpx;
		background: #FFFFFF;
		box-shadow: 4px 4px 6px rgba(85, 85, 85, 0.1);
		opacity: 1;
		border-radius: 30rpx;
		margin: 0 auto;
		padding: 30rpx;
		display: flex;

		.avatar {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				object-fit: contain;
			}

		}

		.detail {
			margin-left: 30rpx;
			width: 100%;

			text:first-child {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			position: relative;
		}

		.icon {
			display: inline-block;
			width: 86rpx;
			height: 32rpx;
			background-color: #FF6262;
			border-radius: 30rpx;
			margin-left: 12rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 32rpx;
			position: relative;
			top: -2rpx;
		}

		.img {
			image {
				width: 33rpx;
				height: 33rpx;
				transform: rotate(180deg);
				position: absolute;
				right: 30rpx;
				top: 50rpx;
			}

		}
	}
</style>
